<template>
  <ga-modal
    v-model:visible="visible"
    title-align="start"
    :width="520"
    @close="handleCancel(formRef)"
  >
    <template #title>新建私有镜像</template>
    <ga-spin style="width: 100%" :loading="loading">
      <ga-form ref="formRef" :model="formData">
        <ga-form-item
          field="resourceId"
          label="平台"
          label-col-flex="70px"
          :rules="[RULE.NOT_NULL]"
          :validate-trigger="['change', 'input']"
        >
          <ga-select
            v-model="formData.resourceId"
            @change="(val) => fetchTemplateList(val)"
            placeholder="请选择平台"
          >
            <ga-option v-for="item in platformList" :key="item.id" :value="item.id">
              {{ item.name }}
            </ga-option>
          </ga-select>
        </ga-form-item>
        <ga-form-item
          field="templateId"
          label="镜像"
          label-col-flex="70px"
          :rules="[RULE.NOT_NULL]"
          :validate-trigger="['change', 'input']"
        >
          <ga-select v-model="formData.templateId" placeholder="选择操作类型">
            <ga-option
              v-for="(item, idx) in templateList"
              :key="idx"
              :label="item.name"
              :value="item.id"
            />
          </ga-select>
        </ga-form-item>
        <ga-form-item
          field="projectId"
          label="项目"
          label-col-flex="75px"
          :rules="[RULE.NOT_NULL]"
          :validate-trigger="['change', 'input']"
        >
          <ga-cascader
            v-model="formData.projectId"
            :field-names="{ value: 'id', label: 'cfname', children: '_children' }"
            :options="itpmData"
            placeholder="请选择项目(支持搜索)"
            check-strictly
            allow-clear
            allow-search
          />
        </ga-form-item>
        <ga-form-item
          field="expireTime"
          label="到期时间"
          label-col-flex="70px"
          :rules="[RULE.NOT_NULL]"
          :validate-trigger="['change', 'input']"
        >
          <ga-date-picker
            style="width: 100%"
            show-time
            format="YYYY-MM-DD hh:mm"
            v-model="formData.expireTime"
            @change="onChange"
          />
        </ga-form-item>
      </ga-form>
    </ga-spin>
    <template #footer>
      <ga-button @click="visible = false">取消</ga-button>
      <ga-button type="primary" @click="handleOk">确定</ga-button>
    </template>
  </ga-modal>
</template>

<script setup>
import { ref, reactive } from "vue";
import { getList } from "@/api/platformMgmt";
import { getTemplateList, createTemplate } from "@/api/operatingSystem";
import { commonArchTree } from "@/api/auth";
import { Message } from "@garco-design/web-vue";
import { RULE } from "@/constant/validators";
import useLoading from "@/hooks/loading";
import { useRoute } from "vue-router";

const route = useRoute();
const { tab } = route.query;
const { id } = route.params;
const { loading, setLoading } = useLoading(false);
const formRef = ref(null);
const platformList = ref([]);
const templateList = ref([]);
const itpmData = ref([]);
const formData = reactive({
  resourceId: "",
  templateId: "",
  projectId: "",
  templateType: "private",
  expireTime: "",
});
const visible = ref(false);
const curId = ref("");
// 获取平台方法
const fetchPlatformList = async () => {
  try {
    const { data } = await getList({ limit: -1 });
    platformList.value = data.items;
    formData.resourceId = data.items?.[0].id;
    fetchTemplateList(formData.resourceId);
  } catch (error) {
    console.log(error);
  }
};
//  获取项目方法
const fetchProjectData = async () => {
  try {
    const { data } = await commonArchTree();
    itpmData.value = data;
  } finally {
    setLoading(false);
  }
};
// 获取templateList方法
const fetchTemplateList = async (resourceId) => {
  try {
    const { data } = await getTemplateList({
      resourceId,
      limit: -1,
      osId: id,
      filterOs: 1,
    });
    templateList.value = data.items;
  } catch (error) {
    console.log(error);
  }
};
const open = async () => {
  visible.value = true;
  setLoading(true);
  fetchPlatformList();
  fetchProjectData();
};
// 保存
const emits = defineEmits(["fetchData"]);
const handleOk = async () => {
  const res = await formRef.value?.validate();
  if (!res) {
    try {
      const { code } = await createTemplate(id, [formData]);
      if (code === 20000) Message.success("操作成功");
      emits("fetchData");
      visible.value = false;
    } catch (error) {
      console.log(error);
    }
  }
};
const handleCancel = (formEl) => {
  curId.value = "";
  formEl.resetFields();
};
defineExpose({ open });
</script>

<style lang="scss" scoped>
:deep(.garco-table-header) {
  background-color: #fff !important;
}
</style>
